<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--suppress ALL-->
<html xmlns:th="http://www.thymeleaf.org" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>

	<base th:href="@{/}"><!-- 不用base就使用th:src="@{/js/jquery.min.js} -->
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>天天生鲜-商品详情</title>
	<link rel="stylesheet" type="text/css" href="css/reset.css">
	<link rel="stylesheet" type="text/css" href="css/main.css">
	<script src="js/jquery-1.12.4.min.js"></script>
<!---->
	<link href="style/style.css" rel="stylesheet" type="text/css" />
	<script type="text/javascript" src="js/public.js"></script>
	<script type="text/javascript" src="js/jquery.js"></script>
	<script type="text/javascript" src="js/jqpublic.js"></script>
<!--	-->

</head>


<body>
<div class="header_con">
	<div class="header">
		<div class="welcome fl">欢迎来到天天生鲜!</div>
		<div class="fr">
			<div class="login_info fl">
				欢迎您：<em>张 山</em>
			</div>
			<div class="login_btn fl">
				<a href="/index">首页</a>
				<a href="/toLogin" th:if="${session.user==null}">登录</a>
				<span th:if="${session.user!=null}" th:text="'欢迎：'+${session.user.userEmail}" style="color: black"></span>
				<span>|</span>
				<a href="/toRegister">注册</a>
			</div>
			<div class="user_link fl">
				<span>|</span>
				<a href="/toUserCenterInfo">用户中心</a>
				<span>|</span>
				<a href="/carttable/myCart">我的购物车</a>
				<span>|</span>
				<a href="/focustable/myFocus">我的收藏</a>
				<span>|</span>
				<a href="/toUserCenterOrder?currentPage=1&pageSize=4">我的订单</a>
			</div>
		</div>
	</div>
</div>

	<div class="search_bar clearfix">
		<a href="../../page/index.html" class="logo fl"><img src="images/logo.png"></a>
		<div class="search_con fl">
			<input type="text" class="input_text fl" name="" placeholder="搜索商品">
			<input type="button" class="input_btn fr" name="" value="搜索">
		</div>
		<div class="guest_cart fr">
			<a href="/carttable/myCart" class="cart_name fl">我的购物车</a>
			<div class="goods_count fl" id="show_count">1</div>
		</div>
	</div>

	<div class="navbar_con">
		<div class="navbar clearfix">
			<div class="subnav_con fl">
				<h1>全部商品分类</h1>	
				<span></span>			
				<ul class="subnav">
					<li><a href="#" class="fruit">新鲜水果</a></li>
					<li><a href="#" class="seafood">海鲜水产</a></li>
					<li><a href="#" class="meet">猪牛羊肉</a></li>
					<li><a href="#" class="egg">禽类蛋品</a></li>
					<li><a href="#" class="vegetables">新鲜蔬菜</a></li>
					<li><a href="#" class="ice">速冻食品</a></li>
				</ul>
			</div>
			<ul class="navlist fl">
				<li><a href="">首页</a></li>
				<li class="interval">|</li>
				<li><a href="">手机生鲜</a></li>
				<li class="interval">|</li>
				<li><a href="">抽奖</a></li>
			</ul>
		</div>
	</div>

	<div class="breadcrumb">
		<a href="#">全部分类</a>
		<span>></span>
		<a href="#">新鲜水果</a>
		<span>></span>
		<a href="#">商品详情</a>
	</div>

	<div class="goods_detail_con clearfix">
		<div class="goods_detail_pic fl"><img th:src="'images/' + ${goodstable.picture}" style="height: 350px; width: 350px; display: block;"></div>

		<div class="goods_detail_list fr">
			<h3 th:text="${goodstable.name}"></h3>
			<p th:text="${goodstable.goodDetail}"></p>
			<div class="prize_bar">
				<span class="show_pirze">¥<em id="onePrice" th:text="${goodstable.newPrice}"></em></span>
				<span class="show_unit">单  位：500g</span>
			</div>
			<div class="goods_num clearfix">
				<div class="num_name fl">数 量：</div>
				<div class="num_add fl">
					<input  min="1" step="1" value="1" class="num_show fl" id="num">
					<a href="javascript:;" class="add fr" onclick="addOne()">+</a>
					<a href="javascript:;" class="minus fr" onclick="lessOne()">-</a>
				</div>


			</div>
			<div class="total">总价：<em  id="totalPrice" th:text="${goodstable.newPrice}">16.80元</em></div>
<!--			<div class="total" id="allprice">总价：<em th:text="${goodstable.newPrice}">16.80元</em></div>-->
			<div class="operate_btn">
				<input type="hidden" id="goodId" th:value="${goodstable.id}" />
				<a
					href="javascript:buyGood()"
					class="buy_btn">立即购买</a>
				<a th:href="'javascript:cart('+ ${goodstable.id} +')'" class="add_cart" id="add_cart">加入购物车</a>
			</div>
		</div>
	</div>

	<div class="main_wrap clearfix">
		<div class="l_wrap fl clearfix">
			<div class="new_goods">
				<h3>新品推荐</h3>
				<ul>
					<li>
						<a href="#"><img src="images/goods/goods001.jpg"></a>
						<h4><a href="#">进口柠檬</a></h4>
						<div class="prize">￥3.90</div>
					</li>
					<li>
						<a href="#"><img src="images/goods/goods002.jpg"></a>
						<h4><a href="#">玫瑰香葡萄</a></h4>
						<div class="prize">￥16.80</div>
					</li>
				</ul>
			</div>
		</div>


		<div class="r_wrap fr clearfix">
			<ul class="detail_tab clearfix">
				<li class="active" id="jieshao" onclick="jieshao()">商品介绍</li>
				<li id="pinglun" onclick="pinglun()">评论</li>
			</ul>

			<div class="tab_content" id="xq">
				<dl>
					<dt>商品详情：</dt>
					<dd th:text="${goodstable.goodDetail}"></dd>
				</dl>
			</div>
			<div class="tab_content" id="pl" style="display: none">
				<dt>评论详情：</dt>

				<div th:each="c:${comment}">


					<dd th:text="'用户：'+${c.userId}"></dd>
					<dd th:text="'评价：'+${c.text}"></dd>
					<dd th:text="'时间：'+${#dates.format(c.createTime,'yyyy-MM-dd HH:mm:ss')}"></dd>
					<dd th:text="'评价等级：'+${c.star}"></dd>
					<dd th:text="'点赞：'+${c.support}"></dd>
					-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
				</div>

<!--				<dl>-->
<!--					<dt>评论详情：</dt>-->
<!--					-->
<!--					用户：<dd th:text="${comment.userId}"></dd>-->
<!--					评价：<dd th:text="${comment.text}"></dd>-->
<!--					时间：<dd th:text="${comment.createTime}"></dd>-->
<!--					评价等级：<dd th:text="${comment.star}"></dd>-->
<!--					点赞：<dd th:text="${comment.support}"></dd>-->

<!--				</dl>-->
			</div>
		</div>

	</div>

	<div class="footer">
		<div class="foot_link">
			<a href="#">关于我们</a>
			<span>|</span>
			<a href="#">联系我们</a>
			<span>|</span>
			<a href="#">招聘人才</a>
			<span>|</span>
			<a href="#">友情链接</a>		
		</div>
		<p>CopyRight © 2016 北京天天生鲜信息技术有限公司 All Rights Reserved</p>
		<p>电话：010-****888    京ICP备*******8号</p>
	</div>
	<div class="add_jump"></div>

<!--	<script type="text/javascript" src="js/jquery-1.12.2.js"></script>-->
	<script type="text/javascript">


		//点击显示介绍
		function  jieshao(){
			var jieshao=document.getElementById('jieshao');
			var pinglun=document.getElementById('pinglun');
			jieshao.className="active";
			pinglun.className=" ";
			var xq=document.getElementById('xq');
			var pl=document.getElementById('pl');
			xq.style.display="block";
			pl.style.display="none";
		}

		// 点击显示评论
		function  pinglun(){
			var jieshao=document.getElementById('jieshao');
			var pinglun=document.getElementById('pinglun');
			pinglun.className="active"
			jieshao.className=" ";
			var xq=document.getElementById('xq');
			var pl=document.getElementById('pl');
			pl.style.display="block";
			xq.style.display="none";
		}





		//加入购物车
		function cart(goodId){
			var num = $("#num").val();
			//发起ajax请求
			$.get("/carttable/cartInfo",{"goodId":goodId,"num":num},function (data){
				if(data.code==200){
					alert(data.message);
				}else{
					alert(data.message);
				}
			},"json");
		}

		//选择商品数量按钮事件
		// 	增加
		function addOne() {
			var num = document.getElementById("num");
			num.value = parseInt(num.value) + 1;
			var onePrice =parseFloat($("#onePrice").text());
			var num2 = parseInt(num.value);
			$("#totalPrice").text(parseFloat(num2 * onePrice));


		}

		// 减少
		function lessOne() {
			var num = document.getElementById("num");
			// num.value = parseInt(num.value) - 1;


			//让商品数量最小为1
			if(num.value==1)
				num.value=1

			else{
				num.value = parseInt(num.value) - 1
				var num2 = parseInt(num.value);
				var onePrice = parseFloat($("#onePrice").text());
				$("#totalPrice").text(parseFloat(num2 * onePrice));
			}
		}



	// 	//选择商品数量按钮事件
	// // 	增加
	// 	function addOne() {
	//
	// 		var num = document.getElementById("num");
	// 		num.value = parseInt(num.value) + 1;
	//
	//
	// 		var onePrice =parseFloat($("#onePrice").text());
	// 		var num2 = parseInt(num.value);
	// 		 $("#totalPrice").text(num2 * onePrice);
	//
	// 	}
	//
    //   // 减少
	// 	function lessOne() {
	// 		var num = document.getElementById("num");
	// 		// num.value = parseInt(num.value) - 1;
	//
	//
	// 		//让商品数量最小为1
	// 		if(num.value==1)
	// 			num.value=1
	//
	// 		else{
	// 			num.value = parseInt(num.value) - 1
	// 			var num2 = parseInt(num.value);
	// 			var onePrice = parseFloat($("#onePrice").text());
	// 			// var onePrice = Double.valueOf($("#onePrice").text());
	//
	// 			$("#totalPrice").text(num2 * onePrice);
	// 		}
	// 	}


		// 跳转到此时商品的结算页面（不包括不同种类的商品结算）
	function buyGood(){
		var goodId = $("#goodId").val();
		var num = $("#num").val();
		location.href="/goodstable/settlement?goodId="+goodId+"&num="+num;
	}


	</script>
	
</body>
</html>